import { memo, useCallback } from 'react';
import { Panel, Table, TableSelectionModel } from '../../../../functionalComponent';
import { Layout, iup } from '../../../../util';
import { QueryPanel } from '../../../query-panel';
import { getSeletcedList, loadSourceData } from '../../service';
import NoticeIconContent from './NoticeIconContent';
import ShuttleButtons from './ShuttleButtons';
/**
 * 穿梭table
 */
const ShuttleTableHorizontal = (props: any) => {
  const { getRef, state, popupMode, flowCode, busData, rowDisable, iconVisible, defaultSelectedKeys } = props;

  // 表数据data
  const tableRequest = useCallback(
    async (defaultParams) => {
      const sourceId = state.sourceId;
      const newsourceId = sourceId?.indexOf('_') ? iup.split(sourceId, '_')[1] : sourceId;
      const result = await loadSourceData({ flowCode, busData, ...defaultParams, popupMode, sourceId: newsourceId });
      return result;
    },
    [state.sourceId]
  );

  // 已选择
  const tableSelectedRequest = useCallback(async () => {
    // 无选中不需要调用接口
    if (!defaultSelectedKeys?.length) {
      return Promise.resolve({ total: 0, list: [] });
    }
    try {
      const sourceId = state.sourceId;
      const newsourceId = sourceId?.indexOf('_') ? iup.split(sourceId, '_')[1] : sourceId;
      const result = await getSeletcedList({
        id: newsourceId,
        tableIdStr: (defaultSelectedKeys || []).join(','),
        pageIndex: 1,
        pageSize: 1000
      });
      return result;
    } catch {}
  }, [state.sourceId]);

  // 搜索框
  const onSearch = (_, queryCondition) => {
    getRef('table')?.current?.getApi().setExtraParam({ queryCondition });
  };

  return (
    <Layout>
      {state.queryItems.length > 0 && <QueryPanel items={state.queryItems} onSearch={onSearch} />}
      <Layout direction="row" style={{ flex: 1 }}>
        <Panel
          title={'未选择'}
          bodyStyle={{ padding: 0, height: '100%' }}
          style={{ marginBottom: 0, width: 'calc(50% - 23px)' }}
        >
          <NoticeIconContent iconVisible={iconVisible}>
            <Table
              showRowNumber
              columns={state.columns}
              ref={getRef('tableMain')}
              autoLoad={true}
              request={tableRequest}
              key={state.sourceId}
              pagination={{ hideOnSinglePage: false }}
              rowSelection={{
                type: [TableSelectionModel.MULTIPLE_INTERVAL, TableSelectionModel.CHECKBOX],
                disabled: rowDisable
              }}
            />
          </NoticeIconContent>
        </Panel>
        <ShuttleButtons
          isHorizontal={false}
          rowDisable={rowDisable}
          subRowDisable={(xt) => defaultSelectedKeys.includes(xt.id)}
          getRowKey={(x) => x.id}
          outRef={getRef('btnRef')}
          getActiveTable={() => getRef('tableMain')?.current?.getApi()}
          getResultTable={() => getRef('table')?.current?.getApi()}
        />
        <Panel
          title={'已选择'}
          bodyStyle={{ padding: 0, height: '100%' }}
          style={{ marginBottom: 0, width: 'calc(50% - 23px)' }}
        >
          <Table
            showRowNumber
            columns={state.columns}
            ref={getRef('table')}
            request={tableSelectedRequest}
            key={state.sourceId}
            pagination={false}
            rowSelection={{
              type: [TableSelectionModel.ROW],
              disabled: (xt) => defaultSelectedKeys.includes(xt.id)
            }}
            onRow={(rowIndex, _, row) => ({
              onDoubleClick: () => {
                if (!defaultSelectedKeys.includes(row.id)) {
                  getRef('btnRef').current.toLeft(rowIndex);
                }
              }
            })}
          />
        </Panel>
      </Layout>
    </Layout>
  );
};

export default memo(ShuttleTableHorizontal);
